Skip to content

Conversation

@romainmenke
Copy link
Member

@romainmenke romainmenke commented Feb 4, 2023

There are multiple issues, we can't fix them all but we can do a little bit more here and there to improve things a lot overal.

  1. PostCSS re-visits nodes if a child node was modified, inserted, ..
  2. CSS Authors might write their own fallbacks
  3. Multi-feature values generate a bunch of intermediate fallbacks

1: We can keep track of which nodes we generated fallbacks for and skip them
2: We can look at the previous declaration
3: Same as 2

For users this change must be unnoticeable.


example issue :

:is(input, button):is(:hover, :focus) {
	color: rebeccapurple;
}

/* becomes */

input:hover, input:focus, button:hover, button:focus {
	color: #639;
	color: rebeccapurple;
}
input:hover, input:focus, button:hover, button:focus {
	color: #639;
	color: #639;
	color: rebeccapurple;
}
:is(input, button):is(:hover, :focus) {
	color: #639;
	color: rebeccapurple;
}

@romainmenke romainmenke changed the title Reduce the amount of generated fallback css Reduce the amount of generated fallback css (batch 1) Feb 4, 2023
@romainmenke romainmenke marked this pull request as ready for review February 4, 2023 13:31
Copy link
Member

@Antonio-Laguna Antonio-Laguna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is so clever!

Love this a lot and I'm glad this improves the output!

@romainmenke romainmenke merged commit 704a238 into main Feb 5, 2023
@romainmenke romainmenke deleted the reduce-the-amount-of-generated-fallback-css-passionate-fire-bellied-toad-66ff6b4b7d branch February 5, 2023 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment